<template>
    <div>
        <!-- 数据卡片 -->
        <el-card class="mt12" style="margin-top: 10px">
            <div class="handel-btns">
                <div class="left-btns">
                    <el-button size="small" icon="el-icon-plus" type="primary" plain @click="handleAdd()">新增</el-button>
                    <el-button size="small" icon="el-icon-delete" type="danger" plain @click="handleBatchDelete()">删除</el-button>
                </div>
            </div>
            <!-- 数据表格 -->
            <el-table
            :data="unitList"
            v-loading="loading"
            border
            fit
            :header-cell-style="{background:'#f8f8f9',color:'#5a516e',padding:'10px 0px'}"
            :cell-style="{padding:'10px 0px'}"
            @selection-change="handleSelectionChange"
            style="margin: 10px 0">
                <el-table-column type="selection" align="center" width="50px"></el-table-column>
                <el-table-column align="center" label="单元号" width="95" prop="ID" sortable>
                    <template slot-scope="scope">
                    {{ scope.row.id }}
                    </template>
                </el-table-column>
                <el-table-column label="拥有栋数"  align="center">
                    <template slot-scope="scope">
                    {{ scope.row.ridgepole }}
                    </template>
                </el-table-column>
                <el-table-column label="每栋楼层数" align="center">
                    <template slot-scope="scope">
                    <span>{{ scope.row.floor }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="每层房屋数" align="center">
                    <template slot-scope="scope">
                    <span>{{ scope.row.house }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" plain icon="el-icon-edit" @click="handleEdit(scope.row.id)">编辑</el-button>
                        <el-button size="small" type="danger" plain icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                    :current-page="queryForm.pageNum" 
                    :page-size="queryForm.pageSize"
                    :total="total"
                    :page-sizes="[10,20,50,100]"
                    layout="total,sizes,prev,pager,next"
                    @current-change='handleCurrentChange'
                    @size-change='handleSizeChange'>
                </el-pagination>
        </el-card>
        <!-- 新增和编辑弹窗 -->
        <el-dialog :title="title" :visible.sync="show"  width="40%">
            <el-form :model="submitForm" :inline="true" label-width="120px">
                <el-row> 
                    <el-col :span="12">
                        <el-form-item label="拥有栋数" prop="ridgepole">
                            <el-input-number v-model="submitForm.ridgepole" :min="1" :max="100" label="拥有栋数"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="每栋楼层数" prop="floor">
                            <el-input-number v-model="submitForm.floor" :min="1" :max="100" label="每栋楼层数"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="每层房屋数" prop="house">
                            <el-input-number v-model="submitForm.house" :min="1" :max="9" label="每层房屋数"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row> 
            </el-form>
            <div class="dialog-footer" slot="footer" style="margin-right:40px;">
                <el-button type="primary" @click="handleSubmit">确定</el-button>
                <el-button @click="handleCancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { selectAll,getUnit,addUnit,updateUnit,delUnit } from '@/api/unit'
    export default {
        name:'Unit',
        data(){
            return{
                loading:true,
                submitForm:{},
                title:"新增",
                show:false,
                total:120,
                queryForm:{
                    pageNum:1,
                    pageSize:10
                },
                selectList:[],
                unitList:[],
            }
        },
        //创建网页后查询调用数据
        created(){
            this.getList()
        },
        methods:{
            //调用接口提交数据 - 进行添加和编辑操作的弹窗
            handleSubmit(){
                if(this.submitForm.id){
                    this.submitForm.updateBy = this.$Cookie.get("username")
                    updateUnit(this.submitForm).then(res=>{
                        this.show = false
                        this.getList()
                        this.submitForm = {}
                    }).catch(err=>{
                        console.log(err)
                    })
                }else{
                    this.submitForm.createBy = this.$Cookie.get("username")
                    addUnit(this.submitForm).then(res=>{
                        this.show = false
                        this.getList()
                        this.submitForm = {}
                    }).catch(err=>{
                        console.log(err)
                    })
                }
            },
            //重置搜索
            handleReset(){
                this.queryForm = {
                    pageNum:1,
                    pageSize:10
                }
                this.getList()
            },
            //按条件搜索
            handleSearch(){
                this.queryForm.pageNum = 1
                this.getList()
            },
            //修改每页大小
            handleSizeChange(pageSize){
                this.queryForm.pageSize = pageSize
                this.queryForm.pageNum = 1
                this.getList()
            },
            //当前页修改
            handleCurrentChange(pageNum){
                this.queryForm.pageNum = pageNum
                this.getList()
            },
            //调用接口分页查询用户数据
            getList(){
                this.loading = true
                selectAll(this.queryForm).then(res=>{
                    this.unitList = res.data.records
                    this.total = res.data.total
                    this.loading = false
                }).catch(err=>{})
            },
            //删除 - 调用接口删除记录
            handleDelete(ids){
                this.$confirm("你确定删除id为"+ids+"的记录吗？","提示",{
                    cancelButtonText:"取消",
                    confirmButtonText:"确定",
                    type:"warning"
                }).then(()=>{
                    //调接口删除
                    delUnit({ids:ids,sender:this.$Cookie.get("username")}).then(res => {
                        //提示删除成功
                        this.$message("删除成功")
                        //刷新列表
                        this.getList()
                    }).catch(err=>{
                        console.log(err)
                    })
                }).catch(()=>{})
            },
            //添加 - 打开添加弹窗
            handleAdd(){
                this.show = true
                this.title = "新增"
                this.submitForm={ridgepole:1,floor:1,house:1}
            },
            //取消 - 关闭弹窗
            handleCancel(){
                this.show = false
            },
            //编辑 - 打开编辑弹窗
            handleEdit(id){
                getUnit(id).then(res=>{
                    //调接口获取最新数据
                    this.show = true
                    this.title = "编辑"
                    this.submitForm = res.data
                    this.password = res.data.password
                }).catch(err=>{
                    console.log(err)
                })
            },
            //批量删除
            handleBatchDelete(){
                if(this.selectList){
                    let ids = this.selectList.map(o => {return o.id})
                    console.log('ids---------->',ids)
                    this.handleDelete(ids)
                }
            },
            //多选
            handleSelectionChange(val){
                this.selectList = val;
            }
        }
    }
</script>

<style scoped>
    .el-form-item{
        margin: 10px;
    }
</style>